export interface ConfigOption {
    /** 主体颜色 */
    color?: string;
    /** 层数 */
    layerNum?: number;
    /** 列数 */
    colNum?: number;
    /** 上边缘距离 */
    marginTop?: number;
    /** 下边缘距离 */
    marginLeft?: number;
    /** 盖板高度 */
    coverHeight?: number;
    /** 盖板上LED灯带宽度 */
    coverLedWidth?: number;
    /** 盖板上LED灯带高度 */
    coverLedHeight?: number;
    /** 盖板上的LED灯带颜色 */
    coverLedColor?: string;
    /** 盖板上圆弧的高度 */
    coverArcHeight?: number;
    /** 顶板高度 */
    topPlateHeight?: number;
    /** 层间距高度 */
    layerSpaceHeight?: number;
    /** 层板高度 */
    layerPlateHeight?: number;
    /** 侧边板填充宽度 */
    layerSidePadding?: number;
    /** 单元格宽度 */
    cellWidth?: number;
    /** 单元格高度 */
    cellHeight?: number;
    /** 底板高度 */
    bottomPlateHeight?: number;
    /** 左侧边板宽度 */
    leftWidth?: number;
    /** 右侧边板宽度 */
    rightWidth?: number;
    /** 称重托盘的高度 */
    weightTrayHeight1?: number;
    /** 称重托盘的宽度 */
    weightTrayWidth1?: number;
    /** 称重托盘底托的高度 */
    weightTrayHeight2?: number;
    /** 称重托盘底托的宽度 */
    weightTrayWidth2?: number;
    containerHeight?: number;
    /** 容器的宽度：等于称重托盘的宽度 */
    containerWidth?: number;
    /** 屏幕配置 */
    screen?: {
        top?: number;
        left?: number;
        width?: number;
        height?: number;
    };
    cellScreenWidth?: number;
    cellScreenHeight?: number;
    screenBgColor?: string;
}

/**
 * 固定配置
 */
interface GlobalConfig {
    /** logo文字配置 */
    logoText: {
        text: string;
        size: number;
        font: string;
        color: string;
        top: number;
        left: number;
    };
}

type ConfigOption2 = Required<ConfigOption & GlobalConfig>;

/**
 * 实际尺寸转像素尺寸
 * @param size 实际尺寸
 * @param scale 缩放比例
 * @returns 
 */
export const sizeToPx = (size: number, scale: number = 0.25): number => size * scale;

/** 默认配置 */
const DefaultOption: ConfigOption2 = {
    color: '#C0BFC0',
    layerNum: 3,
    colNum: 4,
    marginTop: 10,
    marginLeft: 10,
    coverHeight: sizeToPx(160),
    coverArcHeight: sizeToPx(50),
    coverLedWidth: sizeToPx(500),
    coverLedHeight: sizeToPx(24),
    coverLedColor: 'rgba(0, 0, 0, 0.05)',
    topPlateHeight: sizeToPx(50),
    layerSpaceHeight: sizeToPx(400),
    layerPlateHeight: sizeToPx(70),
    layerSidePadding: sizeToPx(88.5),
    cellWidth: sizeToPx(380),
    cellHeight: sizeToPx(400),
    bottomPlateHeight: sizeToPx(330),
    leftWidth: sizeToPx(60),
    rightWidth: sizeToPx(60),
    weightTrayHeight1: 4,
    weightTrayWidth1: sizeToPx(330),
    weightTrayHeight2: 2.2,
    weightTrayWidth2: sizeToPx(330 * 0.72),
    containerHeight: sizeToPx(400 * 0.5), // 默认值为层间距*0.5
    containerWidth: sizeToPx(330),
    screen: {
        top: sizeToPx(64),
        left: sizeToPx(1606),
        width: sizeToPx(122),
        height: sizeToPx(78)
    },
    cellScreenWidth: sizeToPx(70),
    cellScreenHeight: sizeToPx(50),
    screenBgColor: '#0D7FC3',
    logoText: {
        text: '帧格智能',
        size: 16,
        font: 'Arial',
        color: '#7086AF',
        top: sizeToPx(118),
        left: sizeToPx(80)
    }
};

export class SDCanvasUtil {

    private readonly _canvas: HTMLCanvasElement;
    private readonly ctx: CanvasRenderingContext2D | null;
    private options: ConfigOption2 = DefaultOption;
    private readonly ScreenDefaultColor = '#0D7FC3';
    private readonly LedDefaultColor = 'rgba(0, 0, 0, 0.05)';

    get canvas() {
        return this._canvas;
    }

    constructor (option?: ConfigOption) {
        this.setOption(option);
        // 创建canvas元素
        this._canvas = document.createElement('canvas');
        // this.resetSize();
        // 获取2d渲染上下文
        this.ctx = this._canvas.getContext('2d');
        // 启用抗锯齿
        if (this.ctx) {
            this.ctx.imageSmoothingEnabled = true;
        }
    }

    setOption(option?: ConfigOption) {
        this.options = Object.assign(this.options, option);
    }

    pixelScale(pixel: number): number {
        return pixel * (window.devicePixelRatio || 1);
    }

    /** 获取层宽度（不含侧边板宽度） */
    get layerWidthWithoutSide() {
        return this.options.layerSidePadding * 2 + this.options.cellWidth * this.options.colNum;
    }

    /** 获取总宽度，不含边缘距离 */
    get totalWidth() {
        return this.options.leftWidth + this.layerWidthWithoutSide + this.options.rightWidth;
    }

    /**
     * 获取X坐标(像素坐标)
     * @param left 距离左边缘的宽度，不用加marginLeft
     * @returns 
     */
    private getX(left: number): number {
        return this.pixelScale(this.options.marginLeft + left);
    }

    /**
     * 获取Y坐标(像素坐标)
     * @param top 距离上边缘的高度，不用加marginTop
     * @returns 
     */
    private getY(top: number): number {
        return this.pixelScale(this.options.marginTop + top);
    }

    /** 根据配置重置画布大小 */
    private resize(): void {
        const canvasWidth = this.options.marginLeft * 2 + this.totalWidth;
        const canvasHeight = this.options.marginTop * 2 +
            this.options.coverHeight +
            this.options.topPlateHeight +
            (this.options.layerSpaceHeight + this.options.layerPlateHeight) * this.options.layerNum +
            this.options.bottomPlateHeight;
        this.canvas.style.width = canvasWidth + 'px';
        this.canvas.style.height = canvasHeight + 'px';
        this.canvas.width = this.pixelScale(canvasWidth);
        this.canvas.height = this.pixelScale(canvasHeight);
    }

    /** 绘制盖板 */
    private _drawCover(): void {
        if (!this.ctx) {
            throw new Error("绘制盖板失败，请检查上下文是否可用");
        }
        this.ctx.beginPath();
        this.ctx.fillStyle = this.options.color;
        const x = this.getX(0);
        const y = this.getY(0);
        this.ctx.fillRect(x, y, this.pixelScale(this.totalWidth), this.pixelScale(this.options.coverHeight));

        // 绘制盖板顶部的圆弧区域
        this.ctx.beginPath();
        // 创建线性渐变对象
        const gradient = this.ctx.createLinearGradient(x, y, x, this.getY(this.options.coverArcHeight));
        // 设置渐变颜色
        gradient.addColorStop(0, this.options.color);
        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.35)');
        gradient.addColorStop(1, this.options.color);
        // 使用渐变覆盖灰色背景
        this.ctx.fillStyle = gradient;
        this.ctx.fillRect(x, y, this.pixelScale(this.totalWidth), this.pixelScale(this.options.coverArcHeight));
    }

    /** 绘制盖板上的LED灯 */
    private _drawCoverLed(color?: string): void {
        const c = color || this.options.coverLedColor || this.LedDefaultColor;
        this.options.coverLedColor = c;
        console.log(`设置盖板LED灯颜色为：${c}`);
        if (!this.ctx) {
            throw new Error("绘制盖板上的LED灯失败，请检查上下文是否可用");
        }

        // 绘制LED灯带
        this.ctx.beginPath();
        const x = this.getX((this.totalWidth - this.options.coverLedWidth) * 0.5);
        const y = this.getY(this.options.coverArcHeight + (this.options.coverHeight - this.options.coverArcHeight) * 0.5 - this.options.coverLedHeight * 0.5);
        const w = this.pixelScale(this.options.coverLedWidth);
        const h = this.pixelScale(this.options.coverLedHeight);
        this.ctx.clearRect(x, y, w, h);
        this.ctx.fillStyle = c;
        this.ctx.fillRect(x, y, w, h);
    }

    _drawScreen(): void {
        if (!this.ctx) {
            throw new Error("绘制屏幕失败，请检查上下文是否可用");
        }
        const { screen } = { ...this.options };
        if (screen && screen.left && screen.top && screen.width && screen.height) {
            this.ctx.beginPath();
            this.ctx.fillStyle = this.ScreenDefaultColor;
            this.ctx.fillRect(this.getX(screen.left), this.getY(screen.top), this.pixelScale(screen.width), this.pixelScale(screen.height));
        }
    }

    _drawLogo(): void {
        if (!this.ctx) {
            throw new Error("绘制LOGO失败，请检查上下文是否可用");
        }
        this.ctx.beginPath();
        const { logoText } = { ...this.options };
        this.ctx.font = `bold ${this.pixelScale(logoText.size)}px ${logoText.font}`;
        // 设置文字颜色
        this.ctx.fillStyle = logoText.color;
        const x = this.getX(logoText.left);
        const y = this.getY(logoText.top);
        this.ctx.fillText(logoText.text, x, y);
    }

    /** 设置盖板LED灯颜色 */
    public setCoverLedColor(color?: string): void {
        this._drawCoverLed(color);
    }

    /** 绘制两侧的挡板 */
    private _drawSidePallet(): void {
        if (!this.ctx) {
            throw new Error("绘制盖板上的LED灯失败，请检查上下文是否可用");
        }
        // 绘制左侧板
        // 计算侧板的高度 = 顶部板的高度 + (层板间距 + 层板高度) * 层数 + 底板高度
        const sidePlateHeight = this.options.topPlateHeight + (this.options.layerSpaceHeight + this.options.layerPlateHeight) * this.options.layerNum + this.options.bottomPlateHeight;
        this.ctx.beginPath();
        this.ctx.fillStyle = this.options.color;
        this.ctx.fillRect(this.getX(0), this.getY(this.options.coverHeight), this.pixelScale(this.options.leftWidth), this.pixelScale(sidePlateHeight));
        // 绘制右侧板
        const rightPlateLeftTopX = this.options.marginLeft + this.options.leftWidth + this.layerWidthWithoutSide;
        this.ctx.fillStyle = this.options.color;
        this.ctx.fillRect(this.pixelScale(rightPlateLeftTopX), this.getY(this.options.coverHeight), this.pixelScale(this.options.rightWidth), this.pixelScale(sidePlateHeight));
    }

    /** 绘制顶部板 */
    private _drawTopPlate(): void {
        if (!this.ctx) {
            throw new Error("绘制顶部板失败，请检查上下文是否可用");
        }
        this.ctx.beginPath();
        const leftTopX = this.options.marginLeft + this.options.leftWidth; // 左上角X坐标
        const leftTopY = this.options.marginTop + this.options.coverHeight; // 左上角Y坐标
        this.ctx.moveTo(this.pixelScale(leftTopX), this.pixelScale(leftTopY)); // 左上角顶点
        const rightTopX = this.options.marginLeft + this.options.leftWidth + this.layerWidthWithoutSide; // 右上角X坐标
        const rightTopY = leftTopY;
        this.ctx.lineTo(this.pixelScale(rightTopX), this.pixelScale(rightTopY)); // 右上角顶点
        // 绘制顶部板与盖板之间的分隔线
        this.ctx.strokeStyle = '#fff';
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(this.pixelScale(rightTopX), this.pixelScale(rightTopY)); // 右上角顶点
        const rightBottomX = rightTopX; // 右下角X坐标
        const rightBottomY = leftTopY + this.options.topPlateHeight; // 右下角Y坐标
        this.ctx.lineTo(this.pixelScale(rightBottomX), this.pixelScale(rightBottomY)); // 右下角顶点
        const leftBottomX = leftTopX;
        const leftBottomY = rightBottomY;
        this.ctx.lineTo(this.pixelScale(leftBottomX), this.pixelScale(leftBottomY)); // 左下角顶点
        this.ctx.lineTo(this.pixelScale(leftTopX), this.pixelScale(leftTopY)); // 左上角顶点
        this.ctx.strokeStyle = this.options.color;
        this.ctx.stroke();
        this.ctx.fill();
    }

    /** 绘制层板（层间距+层板，将层间隙空间和层板当做整体） */
    private _drawLayer(): void {
        if (!this.ctx) {
            throw new Error("绘制层失败，请检查上下文是否可用");
        }
        const csWidth = this.options.cellScreenWidth;
        const csHeight = this.options.cellScreenHeight;
        const csBgColor = this.options.screenBgColor;

        // 最上层的层间隙距离顶部的距离
        const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
        const _layerLeft = this.options.marginLeft + this.options.leftWidth;
        for (let i = 1; i <= this.options.layerNum; i++) {
            this.ctx.beginPath();
            const y = _layerTop + this.options.layerSpaceHeight * i + this.options.layerPlateHeight * (i - 1);
            this.ctx.rect(this.pixelScale(_layerLeft), this.pixelScale(y), this.pixelScale(this.layerWidthWithoutSide), this.pixelScale(this.options.layerPlateHeight));
            this.ctx.fillStyle = this.options.color;
            this.ctx.fill();

            const y2 = y + (this.options.layerPlateHeight - csHeight) * 0.5;
            // 绘制层板上对应库位的屏幕
            for (let j = 1; j <= this.options.colNum; j++) {
                const x2 = _layerLeft +
                    this.options.layerSidePadding +
                    this.options.cellWidth * (j - 0.5) -
                    csWidth * 0.5;

                this.ctx.beginPath();
                this.ctx.fillStyle = csBgColor;
                this.ctx.rect(this.pixelScale(x2), this.pixelScale(y2), this.pixelScale(csWidth), this.pixelScale(csHeight));
                this.ctx.fill();

                // 绘制库位编号
                const fontSize = 12;
                this.ctx.font = `bold ${this.pixelScale(fontSize)}px Arial`;
                this.ctx.fillStyle = this.ScreenDefaultColor;
                const rowNo = this.options.layerNum + 1 - i;
                this.ctx.fillText(`${rowNo}-${j}`, this.pixelScale(x2 + csWidth + 10), this.pixelScale(y2 + fontSize * 1.2 * 0.75));
            }
        }
    }

    /** 绘制底板 */
    private _drawBottomPlate(): void {
        if (!this.ctx) {
            throw new Error("绘制底板失败，请检查上下文是否可用");
        }
        const _bottomPlateTop = this.options.marginTop +
            this.options.coverHeight +
            this.options.topPlateHeight +
            (this.options.layerSpaceHeight + this.options.layerPlateHeight) * this.options.layerNum;
        const _bottomPlateLeft = this.options.marginLeft + this.options.leftWidth;
        // 绘制上边（白色）
        this.ctx.beginPath();
        this.ctx.moveTo(this.pixelScale(_bottomPlateLeft), this.pixelScale(_bottomPlateTop));
        const _rightTopX = _bottomPlateLeft + this.layerWidthWithoutSide; // 右上角X坐标
        this.ctx.lineTo(this.pixelScale(_rightTopX), this.pixelScale(_bottomPlateTop));
        this.ctx.strokeStyle = '#fff';
        this.ctx.stroke();
        // 绘制其余三边
        this.ctx.beginPath();
        this.ctx.moveTo(this.pixelScale(_rightTopX), this.pixelScale(_bottomPlateTop)); // 右上角顶点
        const _rightBottomY = _bottomPlateTop + this.options.bottomPlateHeight * 0.75; // 右下角Y坐标，由于底部最底下有空白，所以此处的高度减去0.25
        this.ctx.lineTo(this.pixelScale(_rightTopX), this.pixelScale(_rightBottomY)); // 右下角顶点
        this.ctx.lineTo(this.pixelScale(_bottomPlateLeft), this.pixelScale(_rightBottomY)); // 左下角顶点
        this.ctx.lineTo(this.pixelScale(_bottomPlateLeft), this.pixelScale(_bottomPlateTop)); // 左上角顶点
        this.ctx.strokeStyle = '#fff';
        this.ctx.stroke();
        this.ctx.fillStyle = this.options.color;
        this.ctx.fill();
    }

    /** 绘制库位单元格 */
    private _drawCell(): void {
        if (!this.ctx) {
            throw new Error("绘制库位单元格失败，请检查上下文是否可用");
        }
        // 计算层空间的顶部距离顶部的距离
        const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
        const _layerLeft = this.options.marginLeft + this.options.leftWidth + this.options.layerSidePadding;
        for (let i = 1; i <= this.options.layerNum; i++) {
            const _top = this.pixelScale(_layerTop + (this.options.layerSpaceHeight + this.options.layerPlateHeight) * (i - 1));
            for (let j = 1; j <= this.options.colNum; j++) {
                const _left = this.pixelScale(_layerLeft + this.options.cellWidth * (j - 1));
                this.ctx.beginPath();
                this.ctx.rect(_left, _top, this.pixelScale(this.options.cellWidth), this.pixelScale(this.options.cellHeight));
                this.ctx.fillStyle = 'rgba(0, 0, 0, 0.03)';
                this.ctx.fill();
            }
        }
    }

    /** 绘制称重传感器底托部分（两部分） */
    private _drawWeightBottom(): void {
        if (!this.ctx) {
            throw new Error("绘制称重传感器底托失败，请检查上下文是否可用");
        }
        this.ctx.fillStyle = this.options.color;
        const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
        const _layerLeft = this.options.marginLeft + this.options.leftWidth + this.options.layerSidePadding;
        for (let i = 1; i <= this.options.layerNum; i++) {
            const _top2 = this.pixelScale(_layerTop + this.options.layerSpaceHeight * i + this.options.layerPlateHeight * (i - 1) - this.options.weightTrayHeight2);
            const _top1 = this.pixelScale(_layerTop + this.options.layerSpaceHeight * i + this.options.layerPlateHeight * (i - 1) - this.options.weightTrayHeight2 - this.options.weightTrayHeight1);
            for (let j = 1; j <= this.options.colNum; j++) {
                const _left2 = this.pixelScale(_layerLeft + this.options.cellWidth * (j - 0.5) - this.options.weightTrayWidth2 * 0.5);
                const _left1 = this.pixelScale(_layerLeft + this.options.cellWidth * (j - 0.5) - this.options.weightTrayWidth1 * 0.5);
                this.ctx.beginPath();
                this.ctx.rect(_left2, _top2, this.pixelScale(this.options.weightTrayWidth2), this.pixelScale(this.options.weightTrayHeight2));
                this.ctx.fill();
                this.ctx.beginPath();
                this.ctx.rect(_left1, _top1, this.pixelScale(this.options.weightTrayWidth1), this.pixelScale(this.options.weightTrayHeight1));
                this.ctx.fill();
            }
        }
    }

    /** 绘制库位上的容器 */
    private _drawContainer(): void {
        if (!this.ctx) {
            throw new Error("绘制库位上的容器失败，请检查上下文是否可用");
        }
        this.ctx.fillStyle = this.options.color;
        const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
        const _layerLeft = this.options.marginLeft + this.options.leftWidth + this.options.layerSidePadding;
        const _containerBottomSpace = 2;
        for (let i = 1; i <= this.options.layerNum; i++) {
            const _top = this.pixelScale(_layerTop + this.options.layerSpaceHeight * i + this.options.layerPlateHeight * (i - 1) - this.options.weightTrayHeight2 - this.options.weightTrayHeight1 - this.options.containerHeight - _containerBottomSpace);
            for (let j = 1; j <= this.options.colNum; j++) {
                const _left = this.pixelScale(_layerLeft + this.options.cellWidth * (j - 0.5) - this.options.containerWidth * 0.5);
                this.ctx.beginPath();
                this.ctx.rect(_left, _top, this.pixelScale(this.options.containerWidth), this.pixelScale(this.options.containerHeight));
                this.ctx.fill();
            }
        }
    }

    public drawCellContainer(item: { rowId: number; colId: number; label1: string; label2: string; label3: string; bgColor?: string; textColor?: string; }) {
        try {
            if (!this.ctx) {
                throw new Error("绘制库位上的容器失败，请检查上下文是否可用");
            } else if (item.rowId > this.options.layerNum || item.colId > this.options.colNum) {
                throw new Error(`层数/列数超出边界,请检查库位编号是否正确`);
            }

            const rowNo = this.options.layerNum + 1 - item.rowId;
            const colNo = item.colId;
            this.ctx.fillStyle = item.bgColor || this.options.color;
            const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
            const _layerLeft = this.options.marginLeft + this.options.leftWidth + this.options.layerSidePadding;
            const _containerBottomSpace = 2;
            const _top = this.pixelScale(_layerTop + this.options.layerSpaceHeight * rowNo + this.options.layerPlateHeight * (rowNo - 1) - this.options.weightTrayHeight2 - this.options.weightTrayHeight1 - this.options.containerHeight - _containerBottomSpace);
            const _left = this.pixelScale(_layerLeft + this.options.cellWidth * (colNo - 0.5) - this.options.containerWidth * 0.5);
            this.ctx.beginPath();
            // 绘制之前，先清除容器区域
            this.ctx.clearRect(_left - 1, _top - 1, this.pixelScale(this.options.containerWidth) + 2, this.pixelScale(this.options.containerHeight) + 2);
            this.ctx.rect(_left, _top, this.pixelScale(this.options.containerWidth), this.pixelScale(this.options.containerHeight));
            this.ctx.fill();

            const fontSize = 12;
            const fontText1 = `${item.label1} - ${item.label2}`;
            const textHeight = fontSize * 1.2;
            this.ctx.font = `bold ${this.pixelScale(fontSize)}px Arial`;
            // 获取文字宽度
            const textWidth1 = this.ctx.measureText(fontText1).width;
            const containerHeight = this.pixelScale(this.options.containerHeight);

            // 设置文字颜色
            this.ctx.fillStyle = item.textColor || '#fff';
            const x1 = _left + (this.pixelScale(this.options.containerWidth) - textWidth1) * 0.5;
            const y1 = _top + containerHeight * 0.5 - this.pixelScale(textHeight) * 0.5;
            this.ctx.fillText(fontText1, x1, y1);

            const fontText2 = item.label3;
            const textWidth2 = this.ctx.measureText(fontText2).width;
            const x2 = _left + (this.pixelScale(this.options.containerWidth) - textWidth2) * 0.5;
            const y2 = _top + containerHeight * 0.75;
            this.ctx.fillText(fontText2, x2, y2);
        } catch (error) {
            throw error;
        }
    }

    public clearCellContainer(item: { rowId: number; colId: number; }) {
        try {
            if (!this.ctx) {
                throw new Error("绘制库位上的容器失败，请检查上下文是否可用");
            } else if (item.rowId > this.options.layerNum || item.colId > this.options.colNum) {
                throw new Error(`层数/列数超出边界,请检查库位编号是否正确`);
            }

            const rowNo = this.options.layerNum + 1 - item.rowId;
            const colNo = item.colId;
            const _layerTop = this.options.marginTop + this.options.coverHeight + this.options.topPlateHeight;
            const _layerLeft = this.options.marginLeft + this.options.leftWidth + this.options.layerSidePadding;
            const _containerBottomSpace = 2;
            const _top = this.pixelScale(_layerTop + this.options.layerSpaceHeight * rowNo + this.options.layerPlateHeight * (rowNo - 1) - this.options.weightTrayHeight2 - this.options.weightTrayHeight1 - this.options.containerHeight - _containerBottomSpace);
            const _left = this.pixelScale(_layerLeft + this.options.cellWidth * (colNo - 0.5) - this.options.containerWidth * 0.5);
            this.ctx.clearRect(_left - 1, _top - 1, this.pixelScale(this.options.containerWidth) + 2, this.pixelScale(this.options.containerHeight) + 2);
        } catch (error) {
            throw error;
        }
    }

    public draw(): void {
        this.resize();
        this._drawCover();
        this._drawCoverLed();
        this._drawScreen();
        this._drawLogo();
        this._drawSidePallet();
        this._drawTopPlate();
        this._drawLayer();
        this._drawBottomPlate();
        // this._drawCell();
        this._drawWeightBottom();
        // this._drawContainer();
    }

    public render() {
        if (!this.ctx) {
            throw new Error("渲染失败，请检查上下文是否可用");
        }
        // 清除整个画布
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.draw();
    }

};
